
let product = JSON.parse(localStorage.getItem('CART'))
// 渲染页面
function dataShow() {
    let tableObj = document.querySelector('table')
    let str = ` <tr>
    <th><input type="checkbox" class="checkbox-all" >全选</th>
    <th>商品图片</th>
    <th>信息</th>
    <th>单价</th>
    <th>数量</th>
    <th>总价</th>
    <th>操作</th>
</tr>`
    product.forEach(v => {
        console.log(v);
        str += `<tr>
<td> <input type="checkbox" class="checkbox-item"></td>
<td><img src=${v.img} alt="shop03" width="80px" height="80px"></td>
<td class="title">${v.title}</td>
<td>￥${v.price}</td>
<td class="num"><input type="button" name="minus" value="-" ${v.num == 0 ? 'disabled=true' : ''}><input type="text" name="amount" value="${v.num}"><input type="button" name="plus" value="+"></td>
<td width="100px">￥${v.totalprice}</td>
<td><a href="#" class='collection'>移入收藏</a><br><a href="#"  class='del'>删除</a></td>
</tr>`
    })
    tableObj.innerHTML = str
}

//计算全部的金额
function totalpri() {
    //获取所有总价金额
    var totall = $('td[width="100px"]')
    var sum = 0 //设置一个累加
    for (let i = 0; i < totall.length; i++) {
        var a = totall[i].innerHTML
        a = Number(a.substring(1))
        sum = sum + a
    }
    var span = node('span')
    span.innerHTML = `￥${sum.toFixed(2)}`

}
function delet() {
    //获取子元素的父元素
    var tab = node('table')
    tab.addEventListener('click', function (e) {
        e = e || window.event
        var a = e.target || e.srcElement //点击的当前标签
        //判断是否点击到的是删除，进行类名判断
        if (a.getAttribute('class') == 'del') {
            a.parentElement.parentElement.remove()
        } else if (a.getAttribute('name') == 'minus') { //-号
            var count = a.nextElementSibling
            //获取节点的值
            var zhi = count.value
            if (--zhi <= 0) {
                zhi = 0
                a.disabled = true
            }
            count.value = zhi
            //获取前面的价格，进行计算
            var priceObj = a.parentElement.previousElementSibling
            var price = priceObj.innerHTML
            price = price.substring(1)
            var total = zhi * price
            var totalPrice = a.parentElement.nextElementSibling
            totalPrice.innerHTML = `￥${total.toFixed(2)}`
            totalpri()
        } else if (a.getAttribute('name') == 'plus') { //+号
            var count = a.previousElementSibling
            //获取节点的值
            var zhi = count.value
            zhi++ //进行++，加完过后再把值赋给count.value
            count.value = zhi
            //计算价格
            //先获取价格的节点
            var priceObj = a.parentElement.previousElementSibling
            //截图价格子字符串，进行计算
            var price = priceObj.innerHTML
            price = price.substring(1)
            var total = zhi * price
            //把计算出来的值赋给总价
            var totalPrice = a.parentElement.nextElementSibling
            totalPrice.innerHTML = `￥${total.toFixed(2)}`
            //点击+号的时候，删除-号的disabled属性
            var abc = a.previousElementSibling.previousElementSibling //获取-号的节点
            abc.removeAttribute('disabled') //删除-号自身的属性
            //计算总价
            totalpri()
        } else if (a.getAttribute('class') == 'collection') {
            alert('收藏成功')
        } else if (a.getAttribute('class') == 'checkbox-all') { //全选
            var checkitem = $('input[class=checkbox-item]') //获取全部复选
            for (var i = 0; i < checkitem.length; i++) { //循环复选
                if (a.checked) { //判断全选的状态
                    checkitem[i].checked = true
                } else {
                    checkitem[i].checked = false
                }
            }
        } else if (a.getAttribute('class') == 'checkbox-item') { //复选
            var echeck = $('input[class=checkbox-item]:checked') //获取全部复选里面有checked属性的
            var checkall = node('input[class=checkbox-all]') //全选
            var checkitem = $('input[class=checkbox-item]') //获取全部复选
            //有checked属性的复选长度和复选长度是否相等
            if (echeck.length == checkitem.length) { //通过个数来判断    
                checkall.checked = true //相等的话，全选就为true
            } else {
                checkall.checked = false
            }
        } else if (a.getAttribute('name') == 'amount') {
            a.addEventListener('input', function () {
                var change = a.value //修改的值
                console.log(change);
                //先获取价格的节点
                var priceObj = a.parentElement.previousElementSibling
                //截图价格子字符串，进行计算
                var price = priceObj.innerHTML
                price = price.substring(1)
                var total = change * price
                //把计算出来的值赋给总价
                var totalPrice = a.parentElement.nextElementSibling
                totalPrice.innerHTML = `￥${total.toFixed(2)}`
                //计算总价
                totalpri()
                // 改变值过后，解除-号disabled
                var minu = $('input[name="minus"]')
                for (let i = 0; i < minu.length; i++) {
                    if (change > 0) {
                        this.previousElementSibling.removeAttribute('disabled')
                    }
                    if (change == 0) {
                        this.previousElementSibling.disabled = true
                    }
                }
            })
        }
    })
}

totalpri()
dataShow()
delet()
function $(a) {
    return document.querySelectorAll(a)
}
function node(a) {
    return document.querySelector(a)
}